<template>
  <div v-show="editShow">
    <div class="container">
      <el-row :gutter="20">
        <div class="clearfix">
          <div class="crumbs">
            <i class="el-icon-back"></i>
            <el-button type="text" @click="goBack">返回</el-button>
          </div>
          <div class="btn-save">
            <el-button type="primary" @click="saveClick('formData')">保存</el-button>
          </div>
        </div>
        <div class="form-box">
          <el-form
            :model="formData"
            :rules="rules"
            ref="formData"
            label-width="120px"
            class="eidt-el-form"
          >
            <el-form-item label="项目类型" prop="projectTypeId">
              <el-select v-model="formData.projectTypeId" placeholder="请选择项目类型">
                <el-option
                  v-for="(type,index) in productType"
                  :label="type.name"
                  :key="index"
                  :value="type.projectTypeId">
                  <div @click="getChangeType(type)">{{type.name}}</div>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="项目经理"  prop="accountId">
              <el-select v-model="formData.accountId" placeholder="项目角色" :filterable="true"  >
                <el-option
                  v-for="(item,index) in users"
                  :label="item.name"
                  :key="index"
                  :value="item.accountId"
                >
                  <div @click="getChange(item)">{{item.name}}</div>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="项目名称" prop="name">
              <el-input v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item label="项目地址" prop="address">
              <el-input v-model="formData.address"></el-input>
            </el-form-item>
            <UploadImg @uploadImg="getUploadImg" :editImg="editImg"  :imgTitle="imgTitle"></UploadImg>
            <UploadImg @uploadImg="getUploadImg1" :editImg="editImg1"  :imgTitle="imgTitle1"></UploadImg>
            <el-form-item label="开始时间" prop="startDate">
              <el-date-picker v-model="formData.startDate" type="datetime" placeholder="开始日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" prop="endDate">
              <el-date-picker v-model="formData.endDate" type="datetime" placeholder="结束日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="短信签名" prop="signName">
              <el-input v-model="formData.signName"></el-input>
            </el-form-item>
            <el-form-item label="短信总计数量" prop="total">
              <el-input v-model="formData.total" type="number" :min="0"></el-input>
            </el-form-item>
            <el-form-item label="短信发送数量" prop="sms">
              <el-input v-model="formData.sms" type="number" :min="0"></el-input>
            </el-form-item>
            <el-form-item label="是否启用">
             <el-radio-group v-model="formData.enabled" @change="getRadio">
                <el-radio :label="0">禁用</el-radio>
                <el-radio :label="1">启用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
      </el-row>
    </div>
  </div>
</template>

<script>
import UploadBanner from "./uploadImg/UploadBanner";
import UploadImg from '../public/UploadImg'
import bus from "../common/bus";
import checkPhone from "../common/checkPhone";

export default {
  name: "editprojectmanage",
  data() {
    return {
      rules: {
        accountId: [{ required: true, message: "请选择项目经理", trigger: "blur" }],
        name: [{ required: true, message: "请填写名称", trigger: "blur" }],
        address: [{ required: true, message: "请填写地点", trigger: "blur" }],
        projectTypeId: [{ required: true, message: '请选择项目类型', trigger: "blur" }],
        startDate: [{ required: true, message: '请选择开始时间', trigger: "blur" }],
        endDate: [{ required: true, message: '请选择结束时间', trigger: "blur" }]
      },
      formData: {
        projectTypeId: "",
        name: "",
        address: "",
        phone: "",
        banner: "",
        signName: "",
        total: "",
        sms: "",
        startDate: "",
        endDate: "",
        accountId:"",
        url:"",
        enabled:0
      },
      projectTypeId:0,
      admin:'',
      productType: [],
      users:[],
      editImg: "",
      editImg1: "",
      project_Id: "",
      imgTitle:'上传banner',
      imgTitle1:'上传logo'
    };
  },
  props: {
    editShow: {
      type: Boolean,
      default: false
    },
    arrarList: {
      type: Array,
      default() {
        return [];
      }
    },
    editData: {
      type: Object
    }
  },
  watch: {
    editData: function() {
      const item = this.editData;
      this.formData = item;
      this.admin=item.admin;
      this.project_Id = item.projectId;
      this.editImg = item.banner;
      this.editImg1 = item.url;
    }
  },
  created() {
    bus.$on("getPTypeId", message => {
      this.ProjectTypeId = message;
    });
    this.getProductType();
    this.getUsers();
  },
  methods: {
    check(query){
     this.$axios.post("/Account/Phone/",{"pageIndex":0,"pageSize":10,"name":query}).then(res => {
          if (res.data.hasError == false) {
            if (res.data.data){
              this.users =[{...res.data.data}]; 
            }
          }
        });
    },
    getUsers(){
       this.$axios.get("/Account/").then(res => {
        if (res.data.hasError == false) {
          this.users = [...res.data.data];
        }
      });
    },
    getProductType() {
      this.$axios.get("/ProjectType/").then(res => {
        if (res.data.hasError == false) {
          this.productType = [...res.data.data];
        }
      });
    },
    getRadio(value){
      this.formData.enabled = value;
    },
    getChangeType(type) {
      this.projectTypeId =  type.projectTypeId
    },
    saveClick(formData) {
      var s = new Date(this.formData.startDate);
      var state_date =
        s.getFullYear() +
        "-" +
        (s.getMonth() + 1) +
        "-" +
        (s.getDate() < 10 ? "0" + s.getDate() : s.getDate()) +
        " " +
        s.getHours() +
        ":" +
        s.getMinutes() +
        ":" +
        s.getSeconds();

      var e = new Date(this.formData.endDate);
      var end_date =
        e.getFullYear() +
        "-" +
        (e.getMonth() + 1) +
        "-" +
        (e.getDate() < 10 ? "0" + e.getDate() : e.getDate()) +
        " " +
        e.getHours() +
        ":" +
        e.getMinutes() +
        ":" +
        e.getSeconds();

      this.formData = {
        projectTypeId: this.formData.projectTypeId,
        name: this.formData.name,
        address: this.formData.address,
        phone: this.formData.phone,
        banner: this.editImg,
        signName: this.formData.signName,
        total: this.formData.total,
        sms: this.formData.sms,
        startDate: state_date,
        endDate: end_date,
        enabled:this.formData.enabled,
        accountId:this.formData.accountId,
        admin:this.admin,        
        url:this.formData.url
      };

      this.$refs[formData].validate(valid => {
        if (valid) {
          if (this.project_Id == "") {

            this.$axios.post("/Project/", this.formData).then(res => {
              if (res.data.hasError == false) {
                this.$message.success("保存成功！");
                this.$refs[formData].resetFields();
                this.goBack();
              } else {
                this.$message.error("保存失败！");
              }
            });
          } else {
            this.$axios
              .put("/Project/" + this.project_Id , this.formData)
              .then(res => {
                if (res.data.hasError == false) {
                  this.$message.success("编辑成功！");
                  this.$refs[formData].resetFields();
                  this.goBack();
                } else {
                  this.$message.error("编辑失败！");
                }
              });
          }
        } else {
          return false;
        }
      });
    },
    getChange(item){
      this.formData.phone=item.phone;
      this.admin=item.name;
    },
    getUploadImg(imgSrc){
      this.editImg = imgSrc;
    },
    getUploadImg1(imgSrc){
      this.formData.url = imgSrc;
    },
    goBack() {
      this.project_Id='';
      this.admin='';
      this.editImg= "";
      this.editImg1= "";
      this.$emit("backFunStu");
      this.$refs['formData'].resetFields();
    }
  },
  components: {
    UploadImg
  }
};
</script>

<style lang="scss">
.container {
  margin-bottom: 10px;
}
.el-inpt-phone{
  width: calc(100% - 70px);
}
.jc-btn{
  position: absolute;
  width: 60px;
  right: 0;
}
</style>